<template>
    <div>
        <el-tabs v-model="activeName" type="border-card" :before-leave="beforeTabLeave">
            <el-tab-pane name="class" label="班级列表">
                <div class="mod-class">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-input v-model="courseName" placeholder="请输入专业名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="getDataList()">搜索
                            </el-button>
                        </el-form-item>

                    </el-form>

                    <el-table :data="courses"  border v-loading="dataListLoading"
                        style="width: 100%  ">


                        <el-table-column prop="courseName" header-align="center" align="center" min-width="100"
                            label="课程名称">
                        </el-table-column>
                        <el-table-column prop="teacherId" header-align="center" align="center" min-width="100"
                            label="教师工号">
                        </el-table-column>
                        <el-table-column prop="teacherName" header-align="center" align="center" min-width="100"
                            label="教师">
                        </el-table-column>
                        <el-table-column prop="type" header-align="center" align="center" min-width="100"
                            label="课程类型">
                        </el-table-column>


                        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="arrangecourse(scope.row)">考试安排
                                </el-button>


                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                        :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                    <!-- 弹窗, 新增 / 修改 -->

                </div>
            </el-tab-pane>
            <el-tab-pane name="arrange" label="考试安排">
                <div>
                    <arrange v-if="arrangeVisible"  ref="arrange" @refreshDataList="getDataList"></arrange>
                </div>
            </el-tab-pane>
            <el-tab-pane name="info" label="安排详情">
                <info  ref="info" @refreshDataList="getDataList"></info>
            </el-tab-pane>
        </el-tabs>
    </div>



</template>

<script>
import { curriculumApi } from '@/api/course';
import arrange from './arrange.vue';
import info from './info.vue';

export default {
    data() {
        return {
            activeName: 'class',
            dataListLoading:false,
            arrangeVisible: false,
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            courseName:'',
            classYear:'',
            courses:[]
        }
    },
    components: {
        arrange,
        info
    },
    mounted() {
        this.getDataList()
    }, computed: {

    },
    methods: {
        getDataList() {
            let params= {limit:this.pageSize,page:this.pageIndex,courseName:this.courseName}
            curriculumApi.getallcourse(params).then(({data}) => {
                this.courses = data.list
                this.pageSize= data.pageSize
                this.totalPage= data.totalCount
            })
        },
        beforeTabLeave(ac) {
            let p = new Promise((resolve, reject) => {

                if ((this.activeName =='class' || this.activeName =='info') && ac == 'arrange') {
                    reject()
                }

                resolve()
            })
            return p
        },
        searchClass() {
            this.getDataList()
        },
        arrangecourse(row) {
            this.activeName = 'arrange'
            this.arrangeVisible = true
            this.$nextTick(() => {
                this.$refs.arrange.init(row)
            })
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },

        deleteHandle(id, code) {

            var ids = id ? [id] : this.dataListSelections.map(item => {
                return item.classId
            })
            this.$confirm(`确定对[${code}]进行[课表清空]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                curriculumApi.clear(ids).then(() => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.getDataList()
                        }
                    })

                })
            })
            .catch(() => {

            })
        }
    }
}
</script>

<style>
.mod-class{
    text-align: center;
}
</style>
